<style>
  div.show-button:hover button {
    display: block;
  }
  div.show-button button {
    display:none;
  }
  .my-btn-group {
    position: absolute;
    z-index: 9999;
    bottom: 0;
    width: 100%;
    left: 55%;
  }

</style>

<div class="panel panel-default" style="margin-top: 40px" ng-if="liveShow" > <!--  -->
  <div class="panel-body">
    <div class="row " style="margin-top: 10px">
      <div class="col-sm-6 col-xs-12 pull-left">
        <span>已上课:&nbsp;<span class="text-danger" countup='' date="{{lesson.startTime | amDateFormat: 'YYYY-MM-DD HH:mm:ss.sss'}}"></span> </span>
        <!--<span><button class="btn btn-default" ng-click="startRecord()" ng-if="!isRecording">开始录制</button></span>-->
        <span style="color: lightgrey;margin-left: 10px" ng-if="isRecording">正在录制...</span>
        <!--<span><button class="btn btn-default" ng-click="stopRecord()" ng-if="isRecording">停止录制</button></span>-->
        <button style="margin-left: 10px" class="btn btn-default" ng-click="stopRecordAndLeave()">下课</button>
      </div>
      <div class="col-sm-6 col-xs-12" style="font-size: larger;padding-top: 10px;">
        <!--<span class="btn btn-default pull-right" ng-click="enableLocalAudio()"><i class="ion-volume-high"></i></span>-->
        <!--<span class="btn btn-default pull-right" ng-click="disableLocalAudio()" style="margin-left: 20px"><i class="ion-ios-mic" ></i></span>-->

        <!--<a style="margin-left: 20px" class="btn btn-default pull-right" ng-click="openWhiteBoard()" ng-if="!whiteBoardOpened">分享白板</a>-->
        <!--<a style="margin-left: 20px" class="btn btn-default pull-right" ng-click="closeWhiteBoard()" ng-if="whiteBoardOpened">关闭白板</a>-->

        <a style="margin-left: 20px" class="btn btn-default pull-right" ng-if="cummunicaitonMode" ng-click="goFullscreen()" >全屏视频区</a>

        <a uib-popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" popover-is-open="myPopClose"
           style="margin-left: 20px" class="btn btn-default pull-right" ng-click="shareScreen()" ng-if="!isShared">屏幕共享</a>
        <a style="margin-left: 20px" class="btn btn-default pull-right" ng-click="stopShareScreen()" ng-if="isShared">取消屏幕共享</a>
      </div>
    </div>
  </div>
</div>

<div class="row" ng-show="!hostLeave && !whiteBoardOpened && !fullscreenVideoFlag && !fullscreenAreaFlag" fullscreen id="originVideoArea" only-watched-property ng-style="FullscreenService.isEnabled() ? {'background-color': 'black', 'width' : '100%'} : {}">
  <div ng-if="!fullScreenEvent" ng-class="{'col-sm-4' : cummunicaitonMode === true , 'col-sm-12' : (cummunicaitonMode !== true )}" style="margin: 0 auto"  ng-repeat="stream in streams track by $index" on-finish-render="ngRepeatFinished">
    <div class="show-button " id="{{ 'myVideo-' + $index }}" ng-style="(cummunicaitonMode === true ? { 'width':'340px', 'height': '255px', 'margin': '0 auto' } : { 'width': '720px', 'height': '540px', 'margin': '0 auto'})">
      <div class="my-btn-group btn-group" role="group" >
        <button type="button" class="btn btn-primary" style="margin-left: -100px" ng-if="!FullscreenService.isEnabled()" ng-click="fullscreenVideo('myVideo-' + $index, $index) ">{{isShared ? '全屏视频区' : '全屏该窗口'}}</button>
        <button type="button" class="btn btn-info" ng-if="stream.hasAudio" ng-click="enableAudio(stream) ">点名发言</button>
        <button type="button" class="btn btn-warning" ng-if="!stream.hasAudio" ng-click="disableAudio(stream)">禁止语音</button>
      </div>
    </div>
  </div>
</div>

<div class="row" ng-show="!hostLeave && !whiteBoardOpened && fullscreenAreaFlag" fullscreen id="videoArea" only-watched-property ng-style="FullscreenService.isEnabled() ? {'background-color': 'black'} : {}">
  <div ng-if="!fullScreenEvent && fullscreenAreaFlag" ng-class="{'col-sm-4' : fullAreaStreams.length === 3 , 'col-sm-6' : fullAreaStreams.length === 2 || fullAreaStreams.length === 4, 'col-sm-12' : fullAreaStreams.length === 1}" style="margin: 0 auto"  ng-repeat="stream in fullAreaStreams track by $index" on-finish-render="ngRepeatFullVideoFinished">
    <div class="show-button " id="{{ 'myAreaVideo-' + $index }}" ng-style="fullAreaStreams.length === 3 ? {'width':'420px', 'height': '315px', 'margin': '0 auto' } : ( fullAreaStreams.length === 1 ? { 'width': '1000px', 'height': '750px', 'margin': '0 auto'} : {'width':'800px', 'height': '450px', 'margin': '0 auto' })">
      <div class="my-btn-group btn-group" role="group">
        <button type="button" class="btn btn-primary" style="margin-left: -100px" ng-click="cancelFullScreenVideo() ">取消全屏</button>
        <button type="button" class="btn btn-info" ng-if="stream.hasAudio" ng-click="enableAudio(stream) ">点名发言</button>
        <button type="button" class="btn btn-warning" ng-if="!stream.hasAudio" ng-click="disableAudio(stream)">禁止语音</button>
      </div>
    </div>
  </div>
</div>

<div class="row" ng-show="!hostLeave && !whiteBoardOpened && fullscreenVideoFlag" fullscreen id="videoSigleArea" only-watched-property ng-style="FullscreenService.isEnabled() ? {'background-color': 'black'} : {}">
  <div class="col-sm-12" ng-if="!fullScreenEvent && fullscreenVideoFlag" ng-repeat="stream in fullScreenStreams track by $index" on-finish-render="ngIfFinished">
    <div class="show-button" id="{{ 'mySigleVideo-' + $index }}" style="width: 1000px; height: 750px; margin: 0 auto">
      <div class="my-btn-group btn-group" role="group">
        <button type="button" class="btn btn-primary" style="margin-left: -100px" ng-click="cancelFullScreenVideo() ">取消全屏</button>
        <button type="button" class="btn btn-info" ng-if="stream.hasAudio" ng-click="enableAudio(stream) ">点名发言</button>
        <button type="button" class="btn btn-warning" ng-if="!stream.hasAudio" ng-click="disableAudio(stream)">禁止语音</button>
      </div>
    </div>
  </div>
</div>

<div class="row" id="whiteBoardContainer" ng-show="whiteBoardOpened">

</div>

<script type="text/ng-template" id="myPopoverTemplate.html">
  <div class="share-screen-list" >
    <ul>
      <li ng-repeat="item in dynamicPopover.content" ng-click="startScreenSharing(item)">
        {{item.content}}
      </li>
    </ul>
  </div>
</script>